const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    connect=require('gulp-connect'),
    sass=require('gulp-sass'),
    cleanCss=require('gulp-clean-css'),
    babel=require('gulp-babel'),
    uglify=require('gulp-uglify');

gulp.task('html', () => {
    gulp.src('src/**/*.html')
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS         
        }))
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload());
})

gulp.task('css',()=>{
    gulp.src('src/css/**/*.scss')
    .pipe(sass())
    .pipe(cleanCss())
    .pipe(gulp.dest('dist/css'))
    .pipe(connect.reload())
})

gulp.task('js',()=>{
    gulp.src('src/js/**/*.js')
    .pipe(babel({
        presets:['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(connect.reload())
})

gulp.task('img',()=>{
    gulp.src('src/images/**/*')
    .pipe(gulp.dest('dist/images'))
})

gulp.task('libs',()=>{
    gulp.src('src/libs/**/*')
    .pipe(gulp.dest('dist/libs'))
})

gulp.task('server',()=>{
    connect.server({
        port:51,
        root:'dist',
        livereload:true
    })
})

gulp.task('watch',()=>{
    gulp.watch('src/**/*.html',['html'])
    gulp.watch('src/**/*.scss',['css'])
    gulp.watch('src/**/*.js',['js'])
})

gulp.task('default',['html','css','js','img','libs','server','watch'])